<template>
  <div class="container">
    <div class="nav-logo">
      <img @click="toHotelInfo" src="../assets/logo.png" alt="" srcset="">
      <span @click="toHotelInfo">{{ hotelInfo.hotelName }}</span>
    </div>
    <div class="nav-room">
      <span @click="toRoom">房间</span>
    </div>
    <div class="nav-order">
      <span @click="toOrder">订单</span>
    </div>
    <div class="nav-hotel">
      <span @click="toHotelInfo">简介</span>
    </div>
    <div v-if="token.value == null || token.entity === null" class="nav-login">
      <div @click="login">登录</div><div class="divider"></div><div @click="register">注册</div>
      <!--登录注册表单-->
      <el-dialog :width="formDialog.width" :title="formDialog.title" :visible.sync="formDialog.visible" :destroy-on-close="true">
        <el-form :model="formDialog.form.entity" status-icon :rules="formDialog.form.rule" ref="form" :label-width="formDialog.form.width" class="demo-ruleForm">
          <el-form-item v-if="!formDialog.isLogin" label="昵称" prop="accName">
            <el-input v-model="formDialog.form.entity.accName" clearable placeholder="请输入昵称(默认手机号码)"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="accPhone">
            <el-input v-model="formDialog.form.entity.accPhone" clearable placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="accPassword">
            <el-input type="password" v-model="formDialog.form.entity.accPassword" clearable show-password placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formDialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="submit('form')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-else class="oneself">
<!--      <div class="nav-my">-->
<!--        <span @click="toOneself">个人中心</span>-->
<!--      </div>-->
      <div class="nav-oneself">
        <div class="account-name" @click="showOneself"><i class="el-icon-caret-left"></i> {{ token.entity.accName}}</div>
        <el-drawer
            :title="oneselfDrawer.title"
            :visible.sync="oneselfDrawer.visible"
            :show-close="oneselfDrawer.showClose"
            direction="rtl">
          <div id="details">
            <el-divider>
              <div class="details-item">
                {{ token.entity.accName}}
              </div>
            </el-divider>
            <div class="details-item">
              <i class="el-icon-phone"></i>
              {{ token.entity.accPhone }}
            </div>
            <div class="details-item">
              <i class="el-icon-s-finance"></i>
              {{ token.entity.accBalance.toLocaleString('zh-CN', {style: 'currency', currency: 'CNY'}) }}
              <span class="top-up" @click="topup">充值</span>
            </div>
            <div class="details-item" style="cursor: pointer;" @click="oneselfDrawer.isUpdatePassword = !oneselfDrawer.isUpdatePassword">
              <i class="el-icon-s-tools"></i>
              修改密码
            </div>
            <div v-if="oneselfDrawer.isUpdatePassword" class="update-password">
              <el-input placeholder="请输入旧密码" v-model="oneselfDrawer.updatePasswordEntity.accPassword" show-password></el-input>
              <el-input placeholder="请输入新密码" v-model="oneselfDrawer.updatePasswordEntity.accNewPassword" show-password></el-input>
              <el-input placeholder="请验证新密码" v-model="oneselfDrawer.updatePasswordEntity.accAgainNewPassword" show-password></el-input>
              <el-button plain type="primary"  @click="updatePassword">确认</el-button>
            </div>
            <el-button @click="loginOut" plain type="danger" class="login-out">退出登录</el-button>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import Store from "@/store";
import Storage from "@/store/storage";
import router from "@/router";
import {Login, Oneself, Topup, UpdatePassword, Register, HotelInfo} from "@/api";
import {Notification} from "element-ui";

export default {
  name: 'PageHead',
  data(){
    return{
      hotelInfo:{},
      formDialog: {
        isLogin: true,
        title: '',
        visible: false,
        form:{
          width: 'auto',
          rule: {
            accPhone: [
              { required: true, message: '请输入手机号', trigger: 'blur' },
              { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
            ],
            accPassword: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 1, trigger: 'blur' }
            ]
          },
          entity: {
            accName: '',
            accPhone: null,
            accPassword: ''
          },
        },
        width: '32%',
        item: {
          label_width: "160px"
        }
      },
      oneselfDrawer: {
        title: '个人中心',
        visible: false,
        showClose: false,
        isUpdatePassword: false,
        updatePasswordEntity: {
          accPassword: '',
          accNewPassword: '',
          accAgainNewPassword: ''
        }
      },
      // token: {
      //   value: Store.getters.getTokenValue,
      //   entity: Store.getters.getTokenEntity
      // },
      store:{
        name: '盗梦之家'
      }
    }
  },
  methods: {
    updatePassword(){
      let accPassword = this.oneselfDrawer.updatePasswordEntity.accPassword
      let accNewPassword = this.oneselfDrawer.updatePasswordEntity.accNewPassword
      let accAgainNewPassword = this.oneselfDrawer.updatePasswordEntity.accAgainNewPassword
      if (accPassword === '' || accNewPassword === '' || accAgainNewPassword === ''){
        Notification.error({
          title: "错误",
          message: "输入框不能为空"
        })
        return;
      }
      UpdatePassword({
        accPassword,
        accNewPassword,
        accAgainNewPassword
      }).then(res => {
        this.oneselfDrawer.visible = false
        this.oneselfDrawer.isUpdatePassword = false
        this.formDialog.visible = true
        this.formDialog.isLogin = true
        this.token.entity = null
        this.token.value = null
        Store.commit("delTokenValue")
      })
    },
    topup(){
      let amount = prompt("充值")
      if (amount === null || amount === ''){
        Notification.info({
          title: "取消充值"
        })
        return
      }
      Topup(amount).then(res => {
        Store.commit("setTokenEntity", res.data)
        // Storage.set(Store.state.token.entityName, JSON.stringify(res.data))
        // this.token.entity = res.data
        // this.token.value = Store.getters.getTokenValue
      })
    },
    showOneself(){
      Oneself().then(res => {
        if (res.code === 301){
          this.token.entity = null
          this.formDialog.visible = true
          this.formDialog.title = this.store.name + "(登录)"
          this.formDialog.isLogin = true
          return;
        }
        Storage.set(Store.state.token.entityName, JSON.stringify(res.data))
        this.token.entity = res.data
        this.token.value = Store.getters.getTokenValue
        this.oneselfDrawer.visible = true
        console.log("aaa")
      })
    },
    submit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.formDialog.isLogin){
            let accPhone = this.formDialog.form.entity.accPhone
            let accPassword = this.formDialog.form.entity.accPassword
            Login({
              accPhone,
              accPassword
            }).then(res => {
              Storage.set(Store.state.token.entityName, JSON.stringify(res.data))
              Store.commit("setTokenEntity", JSON.stringify(res.data))
              this.token.value = Store.getters.getTokenValue
              this.token.entity = res.data
              this.formDialog.visible = false
              console.log("login")
            })
          }else {
            let accName = this.formDialog.form.entity.accName || ''
            let accPhone = this.formDialog.form.entity.accPhone
            let accPassword = this.formDialog.form.entity.accPassword
            Register({
              accName,
              accPhone,
              accPassword
            }).then(res => {
              Notification.success({
                title: "注册成功",
                message: "请登录"
              })
              this.formDialog.title = this.store.name + "(登录)"
              this.formDialog.isLogin = true
              this.formDialog.visible = true
            })
          }
        } else {
          return false;
        }
      });
    },
    toRoom(){
      if (this.$route.path !== '/hotel/room') router.push({name: 'hotel-room'})
    },
    toOrder(){
      if (this.$route.path !== '/hotel/order') router.push({name: 'hotel-order'})
    },
    toHotelInfo(){
      if (this.$route.path !== '/hotel/index') router.push({name: 'hotel-index'})
    },
    toOneself(){
      // if (this.$route.path !== '/hotel/order') router.push({name: 'hotel-oneself'})
    },
    login(){
      this.formDialog.title = this.store.name + "(登录)"
      this.formDialog.isLogin = true
      this.formDialog.visible = true
    },
    register(){
      this.formDialog.title = this.store.name + "(注册)"
      this.formDialog.isLogin = false
      this.formDialog.visible = true
    },
    loginOut(){
      console.log("loginOut")
      this.oneselfDrawer.visible = false
      this.token.entity = null
      this.token.value = null
      Store.commit("delTokenValue")
      if (this.$route.path !== '/hotel/room') router.push({path: '/hotel/room'})
    }
  },
  computed: {
    token: function () {
      const data = {
        entity: Store.getters.getTokenEntity,
        value: Store.getters.getTokenValue
      }
      console.log(data)
      return data
    }
  },
  created() {
    HotelInfo().then(res => {
      this.hotelInfo = res.data
      console.log(this.hotelInfo)
    })
  }
}
</script>

<style lang="less" scoped>
.container{
  font-weight: 600;
  padding: 24px 32px;
  color: white;
  display: flex;
  align-items: center;
  background-position: bottom;
  background-repeat:no-repeat;
  box-sizing: border-box;
  justify-content: flex-end;
  background-image: url("../assets/page-head.png");
  .nav-logo{
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    img{
      cursor: pointer;
      margin: 0 4px;
      width: 16px;
    }
    span{
      cursor: pointer;
    }
  }
  .nav-login{
    display: flex;
    align-items: center;
    width: 96px;
    .divider{
      width: 8px;
      height: 8px;
      border-radius: 50%;
      padding: 0;
      background: white;
    }
    div{
      //background: red;
      padding: 4px;
      cursor: pointer;
    }
    /deep/.el-dialog{
      min-width: 400px;
    }
    span{
      cursor: pointer;
    }
  }
  .nav-room{
    padding: 4px;
    max-width: 64px;
    flex-grow: 1;
    cursor: pointer;
  }
  .nav-order{
    padding: 4px;
    max-width: 64px;
    flex-grow: 1;
    cursor: pointer;
  }
  .nav-hotel{
    padding: 4px;
    max-width: 64px;
    flex-grow: 1;
    cursor: pointer;
  }
  .oneself{
    display: flex;
    align-items: center;
    width: 126px;
    .nav-my{
      padding: 4px;
      max-width: 88px;
      flex-grow: 2;
      cursor: pointer;
    }
    .nav-oneself{
      /deep/.el-drawer{
        min-width: 400px;
        max-width: 320px;
      }
      .account-name{
        box-sizing: border-box;
        background: white;
        padding: 2px 16px 2px 4px;
        margin: 0 2px;
        border-radius: 2px;
        color: darkred;
        cursor: pointer;
        width: 120px;
        /*强制文字在一行文本框内*/
        white-space: nowrap;
        /*溢出部分文字隐藏*/
        overflow: hidden;
        /*溢出部分省略号处理*/
        text-overflow: ellipsis;
        position: relative;
        i{
          position: absolute;
          right: 0;
        }
      }
      #details{
        align-items: center;
        display: flex;
        flex-direction: column;
        color: black;
        .update-password{
          width: 80%;
          div{
            margin-bottom: 20px;
          }
        }
        .details-item{
          margin: 16px 0;
          font-weight: 600;
          display: flex;
          align-items: center;
          .top-up{
            margin-left: 24px;
            color: darkred;
            border: 1px solid darkred;
            font-size: 12px;
            cursor: pointer;
            border-radius: 2px;
          }
        }
        .login-out{
          position: absolute;
          justify-content: flex-end;
          bottom: 40px;
        }
        .el-icon-phone,.el-icon-s-finance,.el-icon-s-tools{
          color: darkred;
          margin-right: 4px;
        }
      }
    }
  }
}
</style>
